<template>
  <div class="ceshiZib">
<div class="introduce">介绍：{{arr}}==={{Description}}</div>
<div class="more" v-if="!isShowAll && isRoll" @click="toDown">展开<i class="iconfont icon-up2-copy"></i></div>
<div class="more" v-if="!isShowAll && !isRoll" @click="toUp">收起<i class="iconfont icon-up2"></i></div>



  </div>
</template>
<script>
import Eventbus from "@/eventbus"
export default {
    data() {
        return {
            arr:"",
            // 歌单信息
            playListDetail: {},
            // 歌单介绍是否显示完整
            isShowAll: true,
            // 歌单介绍是否是收起状态
            isRoll: true,
            Description: null,
            // Description:"介绍:很久没有收拾旧物，趁着搬家，翻开了许久没打开的抽屉，撕开了尘封已久的整理箱，整理的过程中看到了年少时期的同学录、歌词本，还有那些已经布满灰尘的磁带和角落里不起眼的MP3。十年前，手机功能还极其有限，音乐类APP也还寥寥无几，那时班主任时常会突然袭击检查手机，那是—个互联网还未兴起的时代，突然发现，十年前我们的生活那么的纯粹，即使只有简单的漫画书、简单的音乐，却有我们无法释怀的青春和快乐。那时我们最大的兴趣和梦想大概就是拥有一个随时随地听磁带的随身听。在兜里没有几块钱的年纪，攒了许久的生活费，才能买到心仪已久的磁带，那种幸福和满足感绝不是现在等待下载的几秒钟时间可以填满的。只是后来随着时代的进步，随身听慢慢被淘汰，MP3出现在我们的生活中。不知道有多少人还记得那些年那个陪你分—副耳机偷偷听歌的人，而那个人现在过得好吗?人生总有那么多美妙的回忆留在校园，也许十年后真的走在—起这才是真的美妙。回忆从前在校园里走过的路，听过的歌，原来—切过去已经很多年，但有些东西是时间改变不了的。"
        }
    },
    watch: { 
        'playListDetail.description': function() {
            if (this.playListDetail.description.length > 200) {
                this.Description = this.playListDetail.description.substr(0, 200);
                this.isShowAll = false;
            } else {
                this.isShowAll = true;
            }
        }
     },
      methods:{
        // 点击按钮展开歌单介绍
        toDown() {
            this.Description = this.playListDetail.description;
            this.isRoll = false;
        },
        // 点击按钮收起歌单介绍
        toUp() {
            this.Description = this.playListDetail.description.slice(0, 200) + '...';
            this.isRoll = true;
        },
        
      },
      mounted(){
          Eventbus.$on("zia",(val)=>{
            console.log(val)
        })
      }

}
</script>
<style scoped>
.introduce {
    width: 400px;
    font-size: 14px;
    font-weight: normal;
    word-wrap:break-word;
}
.more {
    position: absolute;
    bottom: -20px;
    right: 0px;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
    color: rgb(26, 76, 212);
}

</style>
